<template>
    <div class="shop_header" >
        <div class="nav" :style="{backgroundImage:`url(${info.bgImg})`}">
            <a @click="$router.push('/msite')">
                <i class="iconfont icon--zuo"></i>
            </a>
        </div>
        <div class="shop_content">
            <div class="shop_title_img">
                <img :src="info.avatar" alt="info.name">
            </div>
            <div class="shop_title" @click="showContentAlert=true">
                <div class="pingpai">
                    <span>品牌</span>
                </div>
                <span class="shop_name">{{info.name}}</span>
                <span class="iconfont icon--you"></span>
            </div>
            <div class="shop_score">
                <span>{{info.foodScore}}</span>
                <span>月销售{{info.sellCount}}单</span>
                <span>{{info.description}}</span>
                <span>约{{info.deliveryTime}}分钟</span>
                <span>距离{{info.distance}}</span>
            </div>
            <div class="shop_discount"  v-if="info.supports" @click="showDiscountAlert=true">
                <span class="shoudan" :style="{background:colorArr[info.supports[0].type]}">{{info.supports[0].name}}</span>
                <span>{{info.supports[0].content}}</span>
                <span class="support"  >{{info.supports.length}}个优惠 <i class="iconfont icon--xia"></i></span>
            </div>
        </div>
        <transition name="fade">
            <div class="shop_content_alert" v-if="showContentAlert" @touchstart="touchStart" @touchmove="touchMove">
            <div class="alert_content">
                <div class="shop_title">
                    <div class="pingpai">
                        <span>品牌</span>
                    </div>
                    <span class="shop_name">{{info.name}}</span>
                </div>
                <ul class="alert_score">
                    <li>
                        <h3>{{info.foodScore}}</h3>
                        <p>评分</p>
                    </li>
                    <li>
                        <h3>{{info.sellCount}}单</h3>
                        <p>月销售</p>
                    </li>
                    <li>
                        <h3>{{info.description}}</h3>
                        <p>{{info.deliveryTime}}分钟</p>
                    </li>
                    <li>
                        <h3>{{info.distance}}</h3>
                        <p>距离</p>
                    </li>
                </ul>

                <h3 class="brief-modal-title">
                    <span>公告</span>
                </h3>
                <div class="gonggao">{{info.bulletin}}</div>
                <div class="close"  @click="showContentAlert=false">
                    <span class="iconfont icon--guanbi"  ></span>
                </div>
            </div>
        </div>
        </transition>
        <transition name="up">
            <div class="shop_discount_alert" v-show="showDiscountAlert" @touchstart="touchStart" @touchmove="touchMove">
                <!--阻止touch事件冒泡-->
                <div class="discount_content">
                    <div class="title">优惠活动</div>
                    <div class="content"  >
                        <div class="item" v-for="(value,index) in info.supports" :key="index">
                            <div class="f_item" :style="{background:colorArr[value.type]}">{{value.name}}</div>
                            <div>{{value.content}}</div>
                        </div>
                        <div class="title"></div>
                    </div>
                </div>
                <div class="closed" @click="showDiscountAlert=false">
                    <!---->
                   <i class="iconfont icon--guanbi"></i>
                </div>
            </div>

        </transition>

    </div>
</template>

<script>
    import {mapState} from 'vuex'
    import BScroll from 'better-scroll'
    export default {
        name: "ShopHeader",
        data(){
          return {
              showContentAlert:false,
              showDiscountAlert:false,
              colorArr:['green','yellow','orange']
          }
        },
        watch:{
            showContentAlert(neww,oldd){
              //  this.$emit('dontMove',neww)
            },
            showDiscountAlert(neww,oldd){
             //   this.$emit('dontMove',neww)
            },
        },
        computed:{
            ...mapState(["info"])
        },
        methods:{

            touchStart(e){
                //e.preventDefault();//为什么阻止默认事件会影响关闭shopContentAlert 弹窗
                e.stopPropagation();
            },
            touchMove(e){
               // e.preventDefault();阻止默认事件会让scroll事件消失.阻止冒泡可以，不要轻易阻止默认。
                e.stopPropagation();

            }
        },
        updated(){
           // .window
           //  this.$refs.discount.onscroll=function(e){
           //      e.stopPropagation();
           //      e.preventDefault();
           //      console.log("jjjj")

            //};
            //console.log(this.$refs.shop)this.$refs.wrapper;
            //如果是v-if则元素根本没有渲染，因此无法获取dom元素
          // let wrapper = document.getElementsByClassName("shop_discount_alert")[0];
           // // // // let wrapper=this.$refs.discount;
           // // //
           // this.scroll=new BScroll(wrapper,{});//那么在这里就无法使用wrapper
           // //  console.log(wrapper)
        }
    }
</script>

<style lang="stylus" scoped>
.shop_header
    position:relative

    .nav
        height:0.8rem
        position:relative
        background-size:100%
        .iconfont
            font-size:0.5rem
            font-weight: bolder
            line-height:0.8rem
            display:block
            width:0.8rem
            padding-right:1rem
            text-align:center
            color:#fff
    .shop_content
        position:relative
        .shop_title_img
            position:absolute
            left: 50%
            top:-0.6rem
            transform :translateX(-50%)
            width:1.2rem
            height:1.2rem
            border:1px solid #e38d13
            img
                width: 100%
        .shop_title
            padding-top:0.6rem
            font-size:0.4rem
            text-align:center
            height:0.8rem
            line-height:0.8rem
            display:flex
            align-items :center
            justify-content :center
            .pingpai
                span
                    display:block
                    background:burlywood
                    width: 100%
                    height:0.4rem
                    line-height:0.4rem
                    font-size:0.3rem
                    border-radius:3px
            .shop_name
                //display:inline-block
                margin-left:0.1rem
                height:0.8rem
                max-width :4rem
                white-space :nowrap
                overflow:hidden
                text-overflow:ellipsis
            .iconfont
                //display:block
                height:0.8rem
                font-size:0.4rem
                line-height:0.8rem
                font-weight :bolder
        .shop_score
            font-size:0.25rem
            text-align:center
            margin-bottom:0.1rem
            span
                padding-right:10px
        .shop_discount
            width: 90%
            height:0.4rem
            margin:0 5%
            font-size:0.23rem
            border:1px solid #ccc
            line-height:0.4rem
            .shoudan
                font-weight:600
                font-size:0.22rem
                background:green
                border-radius:3px
                color:#fff
                padding:0 10px
                margin-right:10px
            .support
                float:right
    .shop_content_alert
        position:fixed
        z-index:100
        top:0
        left:0
        bottom:0
        right:0
        background:rgba(100,66,55,0.3)
        display:flex
        justify-content :center
        align-items :center
        &.fade-enter,&.fade-leave-to
            opacity:0
            transform:translateY(-50%)
        &.fade-enter-active,&.fade-leave-active
            transition: all 0.5s
        .alert_content
            width: 90%
            position:relative
            padding-bottom:15px
            background:#fff
            border-radius:10px
            .shop_title
                padding-top:0.6rem
                font-size:0.4rem
                text-align:center
                height:0.8rem
                line-height:0.8rem
                display:flex
                align-items :center
                justify-content :center
                .pingpai
                    span
                        display:block
                        background:burlywood
                        width: 100%
                        height:0.4rem
                        line-height:0.4rem
                        font-size:0.3rem
                        border-radius:3px
                .shop_name
                    //display:inline-block
                    margin-left:0.1rem
                    height:0.8rem
                    max-width :5rem
                    white-space :nowrap
                    overflow:hidden
                    text-overflow:ellipsis


            .alert_score
                display:flex
                li
                    padding:0 0.1rem
                    text-align:center
                    flex:1
                    float:left
                    font-size:0.28rem
                    h3
                        font-size: 0.3rem
                        font-weight:800
                        padding:0.2rem 0 0.1rem 0
            .brief-modal-title
                position relative
                text-align center
                margin 15px auto 15px
                width 140px
                height:30px
                background-image linear-gradient(right, #fff, #f00 50%, #fff)
                background-size 100% 1px
                background-position : 0 50%
                background-repeat no-repeat
                span
                    position:absolute
                    top: 50%
                    left: 50%
                    transform :translate(-50%,-50%)
                    font-size 18px
                    padding 0 6px
                    color #999
                    background-color #fff
            .gonggao
                font-size:0.3rem
            .close
                position:absolute
                left: 50%
                bottom :-0.8rem
                transform:translateX(-50%)
                width:1rem
                height:1rem
                text-align:center
                color:#fff
                span
                    font-size:0.6rem


    .shop_discount_alert
        position:fixed
        z-index:100
        left:0
        top:0
        right:0
        bottom:0
        background:rgba(22,30,30,0.4)
        &.up-enter,&.up-leave-to
            opacity:0
            transform:translateY(50%)
        &.up-enter-active,&.up-leave-active
            transition: all 0.5s
        .discount_content
            position:absolute
            width: 100%
            left:0
            bottom:0
            top:60%
            background:#fff
            //overflow :auto
            .title
                //background:red
                height:1rem
                text-align:center
                font-size:0.6rem
                font-weight:500
                line-height:1rem
            .content
                //background:blue
                height:4rem
                margin-bottom:1rem
                overflow:auto
                .item
                    display:flex
                    //justify-content :center
                    align-items :center
                    height:0.8rem
                    font-size:0.3rem
                    .f_item
                        background:blue
                        margin:0  .2rem 0 .4rem
                        padding:.1rem
                        font-size:0.26rem
                        font-weight:600
                        border-radius:3px
        .closed
            position:absolute
            right:0
            bottom: 40%
            width:1rem
            height:1rem
            //background:red
            i
                font-size:0.8rem
                font-weight:600
                text-align:center
                color:#fff
</style>
